<template>
  <div class="contents">
    <PanelTitle title="主体分析" />

    <div class="mt">
      <div class="infoPanel">
        <div>
          <div class="infoTitle">主体总量</div>
          <div class="infoNumss">
            <span class="infoNum">{{ infoData.totalNum }}</span>
            <span class="infoUnit">家</span>
          </div>
        </div>
        <div>
          <div class="infoTitle">重点企业数量</div>
          <div class="infoNums">
            <span class="infoNum">{{ infoData.keyEntNum }}</span>
            <span class="infoUnit">家</span>
          </div>
         
        </div>
      </div>

      <div ref="maps" class="maps"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import { fitChartSize } from "@/utils/dataUtil.js";
import http from "@/api/http";
import { env } from "@/utils/env";

const maps = ref(null);
let infoData = ref({});

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/num/statist",
    method: "get",
    // params: { yearly: new Date().getFullYear() },
  });
  
  infoData.value = res.data;


  initEchart()
});

const initEchart = async () => {

  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/type/statist/list",
    method: "get",
    // params: { year: new Date().getFullYear() },
  });
  
  // 1:种植 2:加工 3:流通 4:自然人 5:其他

  let pieData = res.data.map((item) => {
    let name = "";

    if (item.type == 1) {
      name = "种植主体";
    } else if (item.type == 2) {
      name = "加工主体";
    } else if (item.type == 3) {
      name = "流通主体";
    } else if (item.type == 4) {
      name = "自然人主体";
    } else if (item.type == 5) {
      name = "其他";
    }
    return { value: item.num, name: name };
  });

  // let pieData = [
  //   { value: res.data.processRatio, name: "加工主体" },
  //   { value: res.data.circulateRatio, name: "流通主体" },
  //   { value: res.data.plantRatio, name: "种植主体" },
  //   { value: res.data.naturalPersonRatio, name: "自然人主体" },
  //   { value: res.data.restsRatio, name: "其他" },
  // ];

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
     
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      width: "44%",
      // left: fitChartSize(10),
      data: ["加工主体", "流通主体", "种植主体", "自然人主体", "其他"],
      textStyle: {
        fontSize: fitChartSize(8),
        color: "#fff",
      },
    },
    tooltip: {
      trigger: 'item'
    },
    // color: ["#00C0FF", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
    {
        name: "外边框",
        type: "pie",
        clockWise: false,
        radius: [fitChartSize(30), fitChartSize(55)], //边框大小
        center: ["50%", "45%"], //边框位置
        silent: true,
        itemStyle: {
          normal: {
            color: "rgba(44, 215, 255, .2)",
          },
        },
        labelLine: {
          normal: {
            length: fitChartSize(45),
            length2: fitChartSize(45),
            show: false, // 隐藏所有指示线
          },
        },
        data: [
          {
            value: 0,
            // itemStyle: {
            //   normal: {
            //     borderWidth: 8, //设置边框粗细
            //     borderColor: "rgb(9,37,71, 0.5)", //边框颜色
            //   },
            // },
          },
        ],
      },
      {
        type: "pie",
        radius: [fitChartSize(35), fitChartSize(50)],
        center: ["50%", "45%"],
        // roseType: "area", 
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(10),
          length2: fitChartSize(54),
          lineStyle: {
            color: "#fff",
          },
        },
        labelLayout: {
          width: fitChartSize(90),
          verticalAlign: "bottom",
          align: "center",
          // dy: fitChartSize(-4),
          // dx: -40,
        },
        label: {
          show: true,
          borderWidth: 10,
          formatter: '{b} {d} %',
          color: '#fff'


        },
        data: pieData,
      },
    ],
  });
}

</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
      // background: #054f63ee;
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
  }
}

.maps {
  height: vh(200);
  width: 100%;
}

.infoPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 vw(15) 0;
}

.infoPanel>div {
  // border-radius: 10px;
  box-sizing: border-box;
  width: vw(160);
  height: vh(80);
  background: rgba(9, 36, 44, 0.4);
  border: vh(1) solid #43e7ff;
  padding: 0 vw(20) 0px;
  margin: vh(6) 0;
}

.infoTitle {
  color: #fff;
  font-size: vh(10);
  line-height: vh(30);
}

.infoNums {
  line-height: vh(20);
}

.infoNumss {
  line-height: vh(36);
}

.infoNum {
  color: #adffd7;
  font-size: vh(26);
  font: SourceHanSansCN-Bold;
}

.infoUnit {
  color: #adffd7;
  font-size: vh(16);
  font: SourceHanSansCN-Bold;
  margin-left: vw(4);
}

.infoSub {
  font-weight: 400;
  font-size: vh(10);
  color: #adffd7;
  line-height: vh(20);
}
</style>